<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!--    引入Vue-->
    <script src="../../static/js/vue.js"></script>
</head>
<body>
<!--装备好一个容器-->
<div id="root">
    姓: <input type="text" v-model="firstname"><br><br><br>
    名: <input type="text" v-model="lastname"><br><br><br>
    <!--    插值语法实现 -->
    <!--    全名: <span>{{firstname.slice(0, 3)}}-{{lastname}}</span>-->
    <!--    methods方法实现-->
    <!--    全名: <span>{{fullName()}}</span>-->
    <!--           计算属性实现-->
    全名 : <span>{{fullName}}</span>
</div>
</body>
</html>
<script src="index.js"></script>
